<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通知统计</title>
	<#include "../common.ftl">
	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div class="layui-card">
	<div class="layui-card-body">
		<p style="font-size:14px;color: rgba(0,0,0,.45);">新增通知
			<span class="pull-right">
                                    <i class="ri-ghost-2-line ri-xl" style="vertical-align: -0.3em;"></i>
                                </span>
		</p>
		<p class="lay-big-font"><span style="font-size: 26px;line-height: 1;" id="total">12684</span>
		</p>
		<div style="height: 350px;" id="ECharts">

		</div>
	</div>
	<p style="padding: 10px 15px 0 15px;border-top: 1px solid #f0f0f0;">
		今日发布通知<span style="padding: 0 10px;" id="dayCount">782</span>
		<span style="margin-left: 20px;" id="rate">日同比 6% &nbsp;
                                <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
									 viewBox="0 0 24 24" width="24" height="24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path d="M12 16l-6-6h12z" fill="rgba(47,204,113,1)" /></svg>
                            </span>
	</p>
</div>


<script src="${ctx.contextPath}/public/lib/echarts/echarts.min.js"></script>
<script src="${ctx.contextPath}/public/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script>
	var ECharts = echarts.init(document.getElementById('ECharts'));
	var option = {
		color: ['#60ABFC',],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			orient: 'horizontal',
			textStyle: {
				color: '#858FA6',
				fontFamily: 'Microsoft YAHei,serf'
			}
		},
		grid: {
			top: 0,
			left: 0,
			right: 0,
			bottom: 0,
			containLabel: true
		},
		xAxis: {
			axisLabel: {
				show: false,
				color: '#858fa6'
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					width: 1,
					color: '#E2E2E2'
				}
			},
			axisLine: {
				lineStyle: {
					width: 1,
					color: '#E2E2E2'
				}
			}
		},
		yAxis: {
			data: [],
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					width: 1,
					color: '#E2E2E2'
				}
			},
			axisLabel: {
				color: '#858fa6'
			},
			axisLine: {
				lineStyle: {
					width: 0,
					color: '#E2E2E2',
					show: false
				}
			}
		},
		series: [{
			name: '数量',
			type: 'bar',
			barGap: 0,
			barWidth: '60%'
		}]
	};
	load(option);
	ECharts.setOption(option);

	function load(option){
		$.ajax({
			type: "post",
			async : false,
			url: ctx+"/notice/statistic",
			data: {},
			success : function (res) {
				console.log(res);
				if(res.code==200){
					res = res.obj;
					var rate = "日同比"+" "+res.rate*100+"%"+" &nbsp;";
					$('#rate').html(rate+"<svg style=\"vertical-align: -0.5em;\" xmlns=\"http://www.w3.org/2000/svg\"\n" +
							"                                     viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n" +
							"                                    <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n" +
							"                                    <path d=\"M12 16l-6-6h12z\" fill=\"rgba(47,204,113,1)\" /></svg>")
					$('#total').html(res.total)
					$('#dayCount').html(res.dayCount)
					option.legend.data = [];
					option.xAxis.data = [];
					for(let i = 0; i < res.time.length; i++) {
						option.legend.data.push(res.time[i]);
						option.xAxis.data.push(res.time[i]);
					}
					option.series[0].data = [];
					for(let i = 0; i < res.num.length; i++) {
						option.series[0].data.push(res.num[i]);
					}
				}
			}
		})
	}
</script>
</body>
</html>